<template>
  <div>
    <div class="content-item-box">
      <div
        :class="['center-item', item.title === curTitle ? 'item-active' : '']"
        v-for="(item, index) in cateLists"
        :key="index"
        @click="changeBox(item)"
      >
        <div style="cursor: pointer">
          <svgVue class="img" :index="index" :title="curTitle" :titles="cateLists"></svgVue>
          <span class="title">{{ item.title }}</span>
        </div>
        <div style="cursor: pointer">
          <span class="num">{{ item.num }}</span
          ><span class="cam">{{ item.cam }}</span>
        </div>
      </div>
    </div>
    <div class="content-center">
      <mould-box
        :datas="data"
        class="mouldbox"
        :chartTitle="chartTitle"
        :chartOption="chartOption"
        :text="text"
        height="12.1875rem"
      />
    </div>
  </div>
</template>

<script>
import MouldBox from '../common/MouldBox.vue';
import svgVue from './TopSvg.vue';
export default {
  data() {
    return {
      chartOption: {
        color: ['#00F9FC'],
        area: true,
        unit: 'm³/min'
      },
      data: [
        { x: '12-01', y: 75, s: '风机风量' },
        { x: '12-06', y: 30, s: '风机风量' },
        { x: '12-11', y: 60, s: '风机风量' },
        { x: '12-16', y: 37, s: '风机风量' },
        { x: '12-21', y: 79, s: '风机风量' },
        { x: '12-26', y: 42, s: '风机风量' },
        { x: '12-31', y: 67, s: '风机风量' }
      ],
      text: ['风机风量'],
      chartTitle: '近24小时风机风量分析',
      curTitle: '风机风量'
    };
  },

  components: {
    MouldBox,
    svgVue
  },

  computed: {
    routeId() {
      return this.$route.params.id;
    },
    cateLists() {
      if (this.routeId === 'MPCHFLJ') {
        return [
          { title: '风机风量', num: '64.3', cam: 'm³/min' },
          { title: '风机风压', num: '10288', cam: 'Pa' },
          { title: '风机温度', num: '59.1', cam: '℃' },
          { title: '风机风速', num: '89.8', cam: 'm/s' },
          { title: '水平震动', num: '90.1', cam: 'mm/s' },
          { title: '垂直震动', num: '95.2', cam: 'mm/s' },
          { title: '风机静压', num: '90.1', cam: 'V' },
          { title: '风机动压', num: '95.2', cam: 'V' }
        ];
      } else {
        return [
          { title: '风机风量', num: '64.3', cam: 'm³/min' },
          { title: '风机电压', num: '62.1', cam: 'V' },
          { title: '风机温度', num: '59.1', cam: '℃' },
          { title: '风机风速', num: '89.8', cam: 'm/s' },
          { title: '水平震动', num: '90.1', cam: 'mm/s' },
          { title: '垂直震动', num: '95.2', cam: 'mm/s' },
          { title: '风机静压', num: '90.1', cam: 'V' },
          { title: '风机动压', num: '95.2', cam: 'V' }
        ];
      }
    }
  },
  mounted() {
  },

  methods: {
    changeBox(item) {
      this.curTitle = item.title;
      this.chartTitle = '近24小时' + item.title + '分析';
      this.chartOption.unit = item.cam;
      this.text.splice(0, 1);
      this.text.push(item.title);
    }
  }
};
</script>
<style scoped lang="scss">
.content-item-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  .center-item {
    width: 9.875rem;
    height: 4.375rem;
    text-align: center;
    font-size: 1rem;
    color: #34c8ff;
    background-color: #1d2d44;
    border-radius: 0.25rem;
    margin-bottom: .9375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    padding: 0.375rem 0;
    box-sizing: border-box;
    .img {
      width: 0.875rem;
      height: 0.875rem;
      display: inline-block;
      margin-right: 0.3125rem;
      vertical-align: middle;
    }
    .title {
      color: #f8f8f8;
      font-size: 0.875rem;
      vertical-align: sub;
      margin-right: 0.3125rem;
    }
    .cam {
      color: #8d8d8d;
      font-size: 0.75rem;
    }
  }
  .item-active {
    background-color: #032d44;
  }
}
</style>
